<template>
	<view class="register-container">
		<uni-forms ref="form" :modelValue="form_data" :rules="form_rules">
			<uni-forms-item label="用户名" name="user_name">
				<uni-easyinput type="text" v-model="form_data.user_name" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="账号" name="account">
				<uni-easyinput type="text" v-model="form_data.account" placeholder="请输入账号" />
			</uni-forms-item>
			<uni-forms-item name="password" label="密码">
				<uni-easyinput type="password" v-model="form_data.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput type="number" maxlength="11" v-model="form_data.phone"
					placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item name="captcha" label="验证码">
				<uni-easyinput type="text" maxlength="6" v-model="form_data.captcha"
					placeholder="请输入验证码" :clearable="false" />
				<CaptchaBtn @get_form="get_form" @get_code="real_code = $event"
					:form="$refs.form" />
			</uni-forms-item>
			<button class="register-btn" @click="_user_register">注册</button>
		</uni-forms>
	</view>
</template>

<script>
	import rules from '../rules.js'
	export default {
		data() {
			return {
				form_data: {
					user_name: '',
					account: '',
					password: '',
					phone: '',
					captcha: ''
				},
				real_code: '',
				form_rules: rules(this)
			}
		},
		methods: {
			get_form(callback) {
				callback && callback(this.$refs.form)
			},
			async _user_register() {
				const form_data = await this.$refs.form.validate()
				const res = await this.$http.user_register({
					...form_data
				})
				uni.showToast({
					title: res
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}
	}
</script>

<style lang="scss">
	.register-container {
		padding-top: 20rpx;

		.register-btn {
			background-color: $base-color;
			color: #fff;
			width: 300rpx;
			margin-top: 50rpx;
		}
	}

	/deep/ .label-text span {
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}

	/deep/ .uni-easyinput {
		padding-right: 20rpx;
	}

	/deep/ .uni-forms-item__content {
		@include flex();
	}
</style>
